<template>
	<u-navbar is-back :immersive="false" :background="{ background: '#FF4110' }" back-icon-color="#fff">
		<view style="padding: 0rpx 20rpx;">
			<u-search placeholder="请输入关键字" v-model="keyword" :show-action="false"></u-search>
		</view>
	</u-navbar>
	<u-sticky>
		<view class="filter ">
			<view class="flex-around">
				<view v-for="item of recommendFilterList">
					<text class="mr5">{{item.label}}</text><u-icon name="arrow-down" size="20" color="#bfbfbf"></u-icon>
				</view>
			</view>
		</view>
	</u-sticky>
	<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="item flex mt10" v-for="item of 10" @click="toOilDetail">
			<view class="left mr10">
				<text class="text" style="top:0">中海油
					157油库</text>
				<text class="text" style="bottom: 0;">重庆市</text>
				<image src="../../static/images/oil.png"></image>
			</view>
			<view class="right">
				<view style="font-weight: 600;">中海油 柴油 国VI 0#</view>
				<view class="mt10">
					<u-tag text="平台自营" size="mini" type="primary" />
				</view>
				<view class="mt10 flex-between">
					<view class="self-center">
						<text class="price-t">采购价</text><text class="fuhao">￥<text class="price">7000.00</text><text
								class="unit">/吨</text></text>
					</view>
					<view
						style="margin-left: 50rpx;background: linear-gradient(90deg,#e93323 0%, #FF7931 100%);color: #fff;padding: 10rpx 20rpx;border-radius: 10px;font-size: 13px;"
						class=" flex-center">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</mescroll-body>

</template>

<script lang="ts" setup>
	import { ref } from "vue"
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
	const recommendFilterList = ref([{
		key: '0',
		label: '全国',
		value: ''
	},
	{
		key: '1',
		label: '全部品牌',
		value: ''
	},
	{
		key: '2',
		label: '全部油品',
		value: ''
	},
	{
		key: '3',
		label: '综合排序',
		value: ''
	}])
	const dataList = ref([])
	// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
	const upCallback = (mescroll) => {
		// const res  = await API()
		// 	const curPageData = res.list || [] // 当前页数据
		// 	if (mescroll.num == 1) dataList.value = []; // 第一页需手动制空列表
		// 	dataList.value = dataList.value.concat(curPageData); //追加新数据

		// 	mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

	}

	/* 前往石油详情页面 */
	const toOilDetail = (id) => {
		uni.navigateTo({
			url: '/pages/oliMall/oliDetail/index'
		})
	}
</script>

<style lang="scss" scoped>
	.place {
		background-color: #ffffff;
		height: 44px;
	}

	.filter {
		padding: 30rpx 0;
		background-color: #fff;
	}

	.item {
		background-color: #fff;
		padding: 10rpx 10rpx;

		.left {
			position: relative;
			padding: 20rpx;
			background-color: #f4f4f5;

			image {
				width: 160rpx;
				height: 140rpx;
			}

			.text {
				position: absolute;
				z-index: 99;
				color: #939990;
				font-size: 10px;
				left: 1px;
			}
		}

		.right {

			.fuhao {
				color: $u-primary;
				font-size: 12px;
			}

			.price {
				color: $u-primary;
				font-size: 18px;
				font-weight: 700;
			}

			.unit {
				color: $u-primary;
				font-size: 12px;
			}

			.price-t {
				font-size: 12px;
				margin-right: 10rpx;
				color: #909399;
			}
		}
	}
</style>